<script lang="ts" setup>
import Aside from '@/components/aside.vue'
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
import Header from './header.vue'
import { ref } from 'vue';
const isCollapse = ref(false)//初始状态
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}

</script>

<template>
        <el-container class="common-layout">
            <el-aside class="aside" :width="isCollapse?'50px':'200px'">
                <Aside></Aside>
            </el-aside>
            <el-container>
                <el-header><Header v-model:change="isCollapse"></Header></el-header>
                <el-main>
                    <RouterView></RouterView>
                </el-main>
            </el-container>
        </el-container>
</template>

<style scoped>
.common-layout {
    width:100vw;
    height:100vh;
}
.el-header {
    background-color: #B3C0D1;
    color: var(--el-text-color-primary);
    display:flex;
    justify-content: space-between;
    align-items:center;
}

.el-aside {
    height:100vh;
    background-color:#151d41;
    color: var(--el-text-color-primary);
}

</style>
